<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:t="https://code.google.com/p/rad-framework/taglib"
	xmlns:s="http://jboss.com/products/seam/taglib">
	
	<c:set var="rendered"
		value="#{combobox.rendered and t:rendered(entity,id)}"/>
	
	<h:outputLabel value="#{label}" rendered="#{rendered}"
		styleClass="#{t:required(entity,id) ? 'rad-framework-form-label-required' : 'rad-framework-form-label'}"/>
	
	<s:fragment rendered="#{rendered}">
		<s:decorate>
			<h:selectOneMenu id="#{id}" value="#{value}"
				rendered="#{!combobox.filtered}"
				disabled="#{t:disabled(entity,id)}"
				required="#{t:required(entity,id)}"
				styleClass="rad-framework-form-field">
				<c:if test="#{!t:required(entity,id)}">
					<f:selectItem itemValue=""/>
				</c:if>
				<f:selectItems value="#{combobox.items}"/>
				<f:converter converterId="#{combobox.converterId}" />
				<a4j:support ajaxSingle="true" event="onchange"
					rendered="#{not empty t:reRender(entity,id)}"
					reRender="#{t:reRender(entity,id)}">
					<s:conversationId/>
				</a4j:support>
			</h:selectOneMenu>
			
			<s:fragment rendered="#{combobox.filtered}">
				<ui:remove>
					<!-- workaround
					http://jboss.com/index.html?module=bb&op=viewtopic&t=126379
					-->
				</ui:remove>
				<script type="text/javascript">
						function setAutoCompleteFramePosition(oFrame){
							scrollDiv = document.getElementById("view-panel");
							scrollPosition = scrollDiv.scrollTop;
							popupDiv = document.getElementById(oFrame.popup);
							popupTop = popupDiv.style.top;
							intPopupTop = popupTop.substring(0,popupTop.length - 2);
							topPosition = intPopupTop - scrollPosition;
							popupDiv.style.top = topPosition + "px";
						} 
				</script>
				
				<h:inputText value="#{value}" id="#{id}Filtered"
					disabled="#{t:disabled(entity,id)}"
					required="#{t:required(entity,id)}"
					styleClass="#{t:required(entity,id) ? 'rad-framework-form-input-field-required' : 'rad-framework-form-input-field'}">
					<f:validator validatorId="#{combobox.validatorId}"/>
					<f:converter converterId="#{combobox.converterId}"/>
					<a4j:support ajaxSingle="true" event="onchange"
						rendered="#{not empty t:reRender(entity,id)}"
						reRender="#{t:reRender(entity,id)}">
						<s:conversationId/>
					</a4j:support>
				</h:inputText>
				
				<rich:suggestionbox id="#{id}SuggestionBox" for="#{id}Filtered"
					suggestionAction="#{combobox.filter}" var="result"
					fetchValue="#{result.value}"
					oncomplete="setAutoCompleteFramePosition(this)"
					minChars="#{combobox.minChars}"
					frequency="#{combobox.frequency}" eventsQueue="viewQ"
					rules="none" rows="0" first="0" width="200" height="150"
					shadowDepth="4" shadowOpacity="4" border="1" cellpadding="2"
					nothingLabel="No values found">
					<h:column>
						<h:outputText value="#{result.value}"/>
					</h:column>
					<h:column>
						<h:outputText value="#{result.label}"/>
					</h:column>
					<ui:remove>
						<a4j:support event="onselect">
							<f:setPropertyActionListener value="#{result.value}"
								target="#{comboBox.id}"/>
						</a4j:support>
					</ui:remove>
				</rich:suggestionbox>
			</s:fragment>
			
			<h:panelGroup>
			<rich:spacer width="5" height="1" />

			<h:graphicImage id="helpIcon" value="#{messages['HelpIcon']}"
				border="0" />
			<rich:toolTip direction="top-right" styleClass="tooltip"
				layout="block" for="helpIcon">
				<h:panelGrid>
					<h:outputText value="#{title}" />
				</h:panelGrid>
			</rich:toolTip>
			</h:panelGroup>
			
		</s:decorate>
	</s:fragment>
</ui:composition>